
<template>
  <div>
    <z-space vertical>
      <h3>form</h3>
<!--      {{state}}-->
      <z-form-template
          :label-inline="true"
         :def="control.def"
         ref="controlForm"
         @fire="control.onFire"
          @ready="onReady"
      >
        <template #after="scope">
           <div v-if="scope.curFormCtx">
             <el-button type="primary"
                        @click="handleFormSubmit(scope.curFormCtx.getCurForm())">提交</el-button>
           </div>
        </template>
      </z-form-template>

      <el-divider></el-divider>


      <div v-if="state.reload" style="height: 500px; overflow: auto">
        <z-form-template
            :slots="search.slots"
            :def="search.def"
            ref="searchForm"
            @fire="search.onFire"
        >
        </z-form-template>
      </div>


    </z-space>
  </div>
</template>

<script>
import {
  FormInput,
  FormInputNativeNumber,
  FormInputNativeInteger,
  FormSelect,
  FormRadio,
  FormCheckbox, FormBase, FormTextarea, FormSimpleUploader
} from "@/zpkgs/hooks/form";
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";
import OuterLink from "@example/plugins/example/components/OuterLink";
import {createDefaultFormSlot} from "../../../static/ext/form/form-slot-utils";

export default {
  components: {OuterLink, DocProps, VueCodeMirror},
  data() {
    return {
      doc: {
        props: [
          {
            name: 'def',
            type: 'Object',
            defVal: '{}',
            desc: '定义'
          },
          {
            name: 'slots',
            type: 'Object',
            defVal: '{}',
            desc: '插值'
          }
        ],
        methods: [
          {
            name: 'getCurForm',
            params: '',
            desc: '获取当前form'
          },
        ],
        events: [
          {
            name: 'ready',
            params: '{ctx // z-form-template的this}',
            desc: '组件初始化事件'
          },
          {
            name: 'fire',
            params: `[type // 事件名, args // 参数, formCtx // 当前绑定的form context]`,
            desc: 'form 事件转发'
          },
        ]
      },
    }
  },
  setup(props, ctx) {
    const {reactive} = globalThis.vueCompositionAPI
    let search =  {
      slots: {
        object_beforeend: createDefaultFormSlot()
      },
      def: {
        ui: {
          attrs: Object.entries({
          })
        },
        properties: {
        },
      },
      onFire([type, args, ctx] = []) {
      }
    }

    let control =  {
      def: {
        properties: {
          // inline: {
          //   ...FormBase('inline', {
          //     ui: {
          //       widget: 'CusSwitch'
          //     }
          //   }),
          //   rules: [],
          // },
          url: {
            ...FormBase('异步生成表单API地址', {
              ui: {
                widget: 'CusInput',
                widgetConfig: {
                  defaultValue: 'http://192.168.1.67:7001/form'
                }
              }
            }),
            rules: [],
          }
        }
      },
      onFire([type, args, ctx] = []) {
        // console.log(type, args, ctx)
        if (type === 'updateValue') {
          // let d = ctx.getDataSync()
          // console.log(d)
          state.inline = args.model.inline
        }
      }
    }

    let state = reactive({
      inline: false,
      reload: false
    })


    function importData() {
      // console.log(ctx.refs.searchForm.getCurForm())
      setTimeout(() => {
        ctx.refs.searchForm.getCurForm().importData({
          text: '111',
          custom: 1
        })
      }, 1000)
    }

    function onReady(e) {
      // importData()
      console.log(e)

      ctx.refs.controlForm.getCurForm().importData({
        url: 'http://192.168.1.67:7001/form',
      })
    }

    async function handleFormSubmit(form) {
      state.reload = false
      let model = form.getModel()
      // console.log('handleFormSubmit', model.url)

      let [err, res] = await ZY.awaitTo(Req.get(model.url))


      search.def.properties = res.result

      setTimeout(() => {
        state.reload = true
      }, 600)

      console.log(res)

    }

    return {
      importData,
      onReady,
      handleFormSubmit,
      search,
      control,
      state,
    }
  }
}
</script>
